<!--
 * @FileDescription 首页
 * @Author lz
 * @Date 20230117 15:03:05
 * @LastEditors lz
 * @LastEditTime 20230117 15:03:05
-->
<template>
    <div class="wp">
        <Hdr></Hdr>
        <img src="/images/Benz600/左.png" class="aperture_l">
        <img src="/images/Benz600/右.png" class="aperture_r">
        <!-- 圆圈 -->
        <!-- <div class="ModuleOptions_1 element" :class="state.current == 1 ? 'select' : ''" @click="ColoSele(1)"></div>
        <img src="/images/Benz600/ic_arrow.png" class="SelectArrow_1" v-if="state.current == 1">

        <div class="ModuleOptions_1 element MO2" :class="state.current == 2 ? 'select' : ''" @click="ColoSele(2)"></div>
        <img src="/images/Benz600/ic_arrow.png" class="SelectArrow_1 SA2" v-if="state.current == 2">

        <div class="element MO3" :class="state.current == 3 ? 'select' : ''" @click="ColoSele(3)"></div>
        <img src="/images/Benz600/ic_arrow.png" class="SA3" v-if="state.current == 3"> -->

        <div class="cte" @click="cte"></div>

        <!-- 字体 -->
        <!-- <div class="TitleBox TP_1">
            <div class="tit_num">01</div>
            <div class="tit_txt">发动机系统</div>
        </div>
        <div class="TitleBox TP_2">
            <div class="tit_num">02</div>
            <div class="tit_txt">车窗系统</div>
        </div>
        <div class="TitleBox TP_3">
            <div class="tit_num">03</div>
            <div class="tit_txt">灯光系统</div>
        </div> -->
        <el-carousel :interval="0" :initial-index="HomeContent.Default.SlideNum.value" type="card" class="swiperBox"
            arrow="never" @change="swipchange">
            <el-carousel-item v-for="(item, index) in state.MenuList" :key="index" class="elItem">
                <div>
                    <div class="ModuleOptions element" :class="state.current == index ? 'select' : ''"
                        @click="ColoSele(index)">
                    </div>
                    <img src="/images/Benz600/ic_arrow.png" class="SelectArrow" v-if="state.current == index">
                    <div class="TitleBox">
                        <div class="tit_num">{{ item.id }}</div>
                        <div class="tit_txt">{{ item.name }}</div>
                    </div>
                </div>
            </el-carousel-item>
        </el-carousel>
        <!-- <el-carousel :interval="0" type="card" class="swiperBox2" arrow="never" ref="carousel">
            <el-carousel-item v-for="(item, index) in state.imgMenuList" :key="index" class="elItem">
                <div>
                    <img :src="`/images/Benz600/${item.name}.png`" class="itemImg"> -->
        <img :src="`/images/Benz600/mhof1.png`" class="CarImg">
        <!-- <img :src="`/images/Benz600/侧面.png`" class="itemImg" :class="state.current == index ? 'amplify' : ''"> -->
        <!-- </div>
            </el-carousel-item>
        </el-carousel> -->
    </div>
</template>

<script setup lang="ts">

import { onMounted, ref, nextTick, reactive } from 'vue';
import { ClientMessage } from "@runtime/generate/message/ClientMessage";
import { useRouter } from 'vue-router'
import HomeContent from './HomeContent';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import MessageCode from './MessageCode';
import SplashComponent from '@components/Splash/SplashComponent';
import Hdr from './Head/index.vue'
import { message } from 'ant-design-vue';
import AssetLoaderComponent from '@runtime/UnityEngineBridge/AssetLoaderComponent';
import GameObjectComponent from '@runtime/UnityEngineBridge/GameObjectComponent';
const router = useRouter()
let carousel = ref(null)
const state = reactive({
    current: 0,
    MenuList: [
        {
            id: '01',
            name: '发动机系统'
        },
        {
            id: '02',
            name: '车窗系统'
        }, {
            id: '03',
            name: '灯光系统'
        }, {
            id: '04',
            name: '雨刮系统'
        }
    ],
    imgMenuList: [{
        name: '发动机'
    }, {
        name: '侧面'
    }, {
        name: '车前'
    }]
});
//模式切换
function ColoSele(id: number) {
    state.current = id
    HomeContent.Default.SlideNum.value = id

}
function swipchange(val: any) {
    //@ts-ignore
    // carousel.value.setActiveItem(val)
}
//点击进入
async function cte() {  
    HomeContent.Default.bigBox.value = false

    //模式设置
    await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.DiagnosisAdapterRequest(MessageCode.Default.MsgCodesList.SYSTEM_SET_MODE, `${state.current + 1}`))

    // if (HomeContent.Default.AssetList.value) {  // 第一次进入存储这些资源id        
    //     JSON.parse(newArr.Content).Result.forEach(async (item: any) => {
    //         let MID = await AssetLoaderComponent.Default.LoadAllAsync(item.Asset);
    //         HomeContent.Default.sourseId.value.set(item.Id, MID)
    //     });
    //     getList()
    // } else {   // 不是第一次进入，先看存储的数组里是否有第一次进入后返回的id
    //     JSON.parse(newArr.Content).Result.forEach(async (item: any) => {
    //         if (HomeContent.Default.sourseId.value.get(item.Id)) {
    //             console.log('已存在');
    //             await GameObjectComponent.Default.ShowHideAsync(HomeContent.Default.sourseId.value.get(item.Id), true);
    //         } else {
    //             console.log('不存在');
    //             let MID = await AssetLoaderComponent.Default.LoadAllAsync(item.Asset);
    //             HomeContent.Default.sourseId.value.set(item.Id, MID)
    //         }
    //     })
    //     getList()
    // }
    getList()
    await GameObjectComponent.Default.ShowAsync(HomeContent.Default.ModelID.value[2]);
}

async function getList() {
    if (state.current + 1 == 1) {
        // 显示当前选项模型
        await GameObjectComponent.Default.ShowHideAsync(HomeContent.Default.ModelID.value[1], true);
        //隐藏模型
        await GameObjectComponent.Default.ShowHideAsync(HomeContent.Default.ModelID.value[0], false);
        //QR
        let QRList: any = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.DiagnosisAdapterRequest(MessageCode.Default.MsgCodesList.SYSTEM_GET_QRCode))
        console.log(JSON.parse(QRList.Content).Result);
        HomeContent.Default.QRList.value = JSON.parse(QRList.Content).Result
        router.push('ENGINE')
    } else if (state.current + 1 == 2) {
        // 显示当前选项模型
        await GameObjectComponent.Default.ShowHideAsync(HomeContent.Default.ModelID.value[0], true);
        //隐藏模型
        await GameObjectComponent.Default.ShowHideAsync(HomeContent.Default.ModelID.value[1], false);
        //QR
        let QRList: any = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.DiagnosisAdapterRequest(MessageCode.Default.MsgCodesList.SYSTEM_GET_QRCode))
        console.log(JSON.parse(QRList.Content).Result);
        HomeContent.Default.QRList.value = JSON.parse(QRList.Content).Result
        router.push('WindowSystem')
    } else if (state.current + 1 == 3) {
        // 显示当前选项模型
        await GameObjectComponent.Default.ShowHideAsync(HomeContent.Default.ModelID.value[0], true);
        //隐藏模型
        await GameObjectComponent.Default.ShowHideAsync(HomeContent.Default.ModelID.value[1], false);
        //QR
        let QRList: any = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.DiagnosisAdapterRequest(MessageCode.Default.MsgCodesList.SYSTEM_GET_QRCode))
        console.log(JSON.parse(QRList.Content).Result);
        HomeContent.Default.QRList.value = JSON.parse(QRList.Content).Result
        router.push('lightSystem')
    }
    else if (state.current + 1 == 4) {
        // 显示当前选项模型
        await GameObjectComponent.Default.ShowHideAsync(HomeContent.Default.ModelID.value[0], true);
        //隐藏模型
        await GameObjectComponent.Default.ShowHideAsync(HomeContent.Default.ModelID.value[1], false);
        //QR
        let QRList: any = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.DiagnosisAdapterRequest(MessageCode.Default.MsgCodesList.SYSTEM_GET_QRCode))
        console.log(JSON.parse(QRList.Content).Result);
        HomeContent.Default.QRList.value = JSON.parse(QRList.Content).Result
        router.push('WiperSystem')
    }
}

onMounted(() => {
    state.current = HomeContent.Default.SlideNum.value
 
})
</script>

<style scoped>
.wp {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    color: #fff;
    background-image: url('/images/Benz600/system_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: -0.5px 0;
}

.aperture_l {
    position: absolute;
    left: 120px;
    top: 77px;
    width: 202px;
    height: 838px;
}

.aperture_r {
    position: absolute;
    right: 120px;
    top: 77px;
    width: 202px;
    height: 838px;
}

.ModuleOptions_1 {
    position: absolute;
    top: 223px;
    left: 432px;
    width: 220px;
    height: 220px;
    background-image: url('/images/Benz600/ic_system_normal.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.ModuleOptions_1:hover {
    background-image: url('/images/Benz600/ic_system_select.png');
}

.ModuleOptions {
    margin: 0 auto;
    width: 220px;
    height: 220px;
    background-image: url('/images/Benz600/ic_system_normal.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.MO3 {
    position: absolute;
    top: 223px;
    right: 432px;
    width: 220px;
    height: 220px;
    background-image: url('/images/Benz600/ic_system_normal.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.MO3:hover {
    background-image: url('/images/Benz600/ic_system_select.png');

}

.SA3 {
    width: 48px;
    height: 22px;
    position: absolute;
    top: 465px;
    right: 516px;
}

.select {
    background-image: url('/images/Benz600/ic_system_select.png');
}

.element {
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.SelectArrow_1 {
    width: 48px;
    height: 22px;
    position: absolute;
    top: 465px;
    left: 516px;
}

.SelectArrow {
    width: 48px;
    height: 22px;
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translate(-50%, 0);
}

.MO2 {
    top: 173px;
    left: 850px;
}

.SA2 {
    top: 415px;
    left: 936px;
}

.cte {
    width: 218px;
    height: 74px;
    position: absolute;
    left: 850px;
    bottom: 108px;
    background-image: url('/images/Benz600/btn_enter.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: all 0.1s linear;
}

.cte:hover {
    transform: scale(1.05);
    transition: all 0.1s linear;
}

.TitleBox {
    font-size: 26px;
    font-family: YouSheBiaoTiHei;
    color: #FFFFFF;
    text-align: center;
    position: absolute;
    pointer-events: none;
    left: 50%;
    top: 11%;
    transform: translate(-50%, 0);
}

.TP_1 {
    top: 260px;
    left: 480px;
}

.TP_2 {
    top: 214px;
    left: 912px;
}

.TP_3 {
    top: 260px;
    right: 493px;
}

.tit_num {
    font-size: 48px;
}

.tit_txt {
    color: #21DDFF;
}

:deep().el-carousel__container {
    height: 280px !important;
}

:deep().el-carousel__mask {
    background: none;
}

.swiperBox {
    margin-top: 80px;
    margin-left: 510px;
    width: 1200px;
}

:deep().el-carousel__indicators--horizontal {
    display: none;
}

:deep().el-carousel__item {
    width: 300px;
}

.itemImg {
    width: 100%;
    height: 100%;
    transform: scale(0.8) !important;
}

.CarImg {
    /* width: 1400px;
    height: 700px; */
    width: 990px;
    left: 743px;
    position: absolute;
    left: 50%;
    pointer-events: none;
    bottom: 30px;
    transform: translate(-50%, 0);
}

.swiperBox2 {
    position: absolute;
    margin-top: 60px;
    width: 1800px;
    margin-left: 160px;
    pointer-events: none;
}

:deep().swiperBox2>.el-carousel__container {
    height: 400px !important;
}

:deep().swiperBox2>.el-carousel__container>.el-carousel__item {
    width: 700px !important;
}

.amplify {
    transition: all 0.3s linear;
    transform: scale(1.2) !important;
}
</style>